<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <base href="http://127.0.0.1:4000/" />
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>scss 实现多主题</title>
  <meta name="keywords" content="scss 多主题" />
  <meta name="description" content="scss 实现多主题" />
  <link rel="stylesheet" href="static/pages/article_details/index.css?v=1.0.0.2022.08.13 10:12:50">
</head>

<body class="daytime-theme">

  <div class="components_header-wrap">
  <div id="components_header-fix">
    <div class="header clearfix">
      <a class="logo fl" href="/">EOWAY.CN</a>

      <div class="menu-toggle-button fr">导航</div>
      <div class="menu-wrap fr">
        <a class="menu-item" href="/">首页</a>
        <a class="menu-item" href="/about.html">关于</a>
        <div class="menu-item switch-theme-wrap">
          <span>切换主题</span>
          <div id="theme-list">
            <div class="theme-list-item" theme="daytime-theme" >日间</div>
            <div class="theme-list-item" theme="night-theme">夜间</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  <div class="page-container">
    
<div class="layout-container clearfix">
  <div class="main-wrap">
    <div class="head-wrap">
      <h1 class="title">scss 实现多主题</h1>
      <p class="date">2021-09-01 09:30:22</p>
    </div>
    <div class="markdown-body"><h1 id="item-1">一、原理</h1>
<p>1、首先定义好主题方案，每个主题设置一个类名。</p>
<p>主题的类名作为父类，子元素绑定所有的主题类名。</p>
<pre><code class="language-scss">// 白天主题
.daytime-theme .child  {
  color:#ffffff;
}

// 夜晚主题
.night-theme .child {
  color:#000000;
}
</code></pre>
<p>2、设置、修改主题</p>
<p>body 设置不同的主题类名达到切换主题效果。</p>
<pre><code class="language-html">&lt;!-- 白天主题 --&gt;
&lt;body class=&quot;daytime-theme&quot;&gt;
  &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;
&lt;/body&gt;

&lt;!-- 夜晚主题 --&gt;
&lt;body class=&quot;night-theme&quot;&gt;
  &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>
<h1 id="item-2">二、Scss 相关指令</h1>
<blockquote>
<p>先熟悉以下的 Scss 指令。</p>
</blockquote>
<h2 id="item-3">父选择 &amp;</h2>
<p>scss：</p>
<pre><code class="language-scss">.child {
  font-weight: bold;
  .daytime-theme &amp; {
    color: #ffffff;
  }
}
</code></pre>
<p>编译后：</p>
<pre><code class="language-scss">.child {
  font-weight: bold;
}
.daytime-theme .child {
  color: #ffffff;
}
</code></pre>
<h2 id="item-4">插值语句 #{}</h2>
<p>scss：</p>
<pre><code class="language-scss">$value:#ffffff;

.child {
 color: #{$value};
}
</code></pre>
<p>编译后：</p>
<pre><code class="language-css">.child {
  color: #ffffff;
}
</code></pre>
<h2 id="item-5">@mixin 和 @include</h2>
<p>scss：</p>
<pre><code class="language-scss">@mixin setNightTheme($key,$value){
  .daytime-theme &amp; {
    #{$key}: #{$value};
  }
}

.child {
  @include setNightTheme(color,#ffffff);
}
</code></pre>
<p>编译后：</p>
<pre><code class="language-css">.daytime-theme .child {
  color: #ffffff;
}
</code></pre>
<h2 id="item-6">数组、@each、map-get</h2>
<pre><code class="language-scss">// 定义一个数组
$themeList: (
  // 白天主题
  &quot;daytime-theme&quot;: (
    &quot;primary-color&quot;: #ffffff
  ),
  // 夜晚主题
  &quot;night-theme&quot;: (
    &quot;primary-color&quot;: #2d2e36
  )
);

// 遍历取值
@each $key, $value in $themeList {
  .#{$key} {
    // map-get 获取键名为 primary-color 的值
    color: map-get($value, 'primary-color');
  }
}
</code></pre>
<p>编译后：</p>
<pre><code class="language-css">.daytime-theme {
  color: #ffffff;
}

.night-theme {
  color: #2d2e36;
}
</code></pre>
<h1 id="item-7">三、Scss 实现多主题</h1>
<p>scss：</p>
<pre><code class="language-scss">$themeList: (
  // 白天主题
  &quot;daytime-theme&quot;: (
    &quot;primary-color&quot;: #ffffff,
    &quot;primary-background&quot;: #333333
  ),
  // 夜晚主题
  &quot;night-theme&quot;: (
    &quot;primary-color&quot;: #2d2e36,
    &quot;primary-background&quot;: #efefef
  )
);

@mixin setThemes($property, $name) {
  @each $key, $value in $themeList {
    .#{$key} &amp; {
      #{$property}: map-get($value, $name);
    }
  }
}

.child {
  @include setThemes(&quot;color&quot;, &quot;primary-color&quot;);
  @include setThemes(&quot;background&quot;, &quot;primary-background&quot;);
}
</code></pre>
<p>编译后：</p>
<pre><code class="language-css">.daytime-theme .child {
  color: #ffffff;
}
.night-theme .child {
  color: #2d2e36;
}
.daytime-theme .child {
  background: #333333;
}
.night-theme .child {
  background: #efefef;
}
</code></pre>
<h1 id="item-8">四、单独设置主题</h1>
<p>scss：</p>
<pre><code class="language-scss">@mixin setSelfThemes($property, $name,$connector:'') {
  @each $key, $value in $themeList {
    #{$connector}.#{$key} {
      #{$property}: map-get($value, $name);
    }
  }
}

.child {
  @include setSelfThemes(&quot;color&quot;, &quot;primary-color&quot;);
}

.self {
  @include setSelfThemes(&quot;color&quot;, &quot;primary-color&quot;,&quot;&amp;&quot;);
}
</code></pre>
<p>编译后：</p>
<pre><code class="language-css">.child .daytime-theme {
  color: #ffffff;
}
.child .night-theme {
  color: #2d2e36;
}

.self.daytime-theme {
  color: #ffffff;
}
.self.night-theme {
  color: #2d2e36;
}
</code></pre>
</div>
  </div>

  <div class="sliber-wrap">
    
<div class="toc-wrap">
  <div class="title">文章目录</div>
  
  <a class="toc-item line-clamp-multi-1 " anchor="item-1" href="1630459822682.html#item-1">一、原理</a>
  
  <a class="toc-item line-clamp-multi-1 " anchor="item-2" href="1630459822682.html#item-2">二、Scss 相关指令</a>
  
  <a class="toc-item line-clamp-multi-1 toc-item-child" anchor="item-3" href="1630459822682.html#item-3">父选择 &#38;</a>
  
  <a class="toc-item line-clamp-multi-1 toc-item-child" anchor="item-4" href="1630459822682.html#item-4">插值语句 #{}</a>
  
  <a class="toc-item line-clamp-multi-1 toc-item-child" anchor="item-5" href="1630459822682.html#item-5">@mixin 和 @include</a>
  
  <a class="toc-item line-clamp-multi-1 toc-item-child" anchor="item-6" href="1630459822682.html#item-6">数组、@each、map-get</a>
  
  <a class="toc-item line-clamp-multi-1 " anchor="item-7" href="1630459822682.html#item-7">三、Scss 实现多主题</a>
  
  <a class="toc-item line-clamp-multi-1 " anchor="item-8" href="1630459822682.html#item-8">四、单独设置主题</a>
  
</div>



  </div>
</div>

  </div>

  <script src="static/pages/article_details/index.js?v=1.0.0.2022.08.13 10:12:50"></script>

  <script src="static/components/socket/index.js"></script>

</body>

</html>